<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    title="插入公式"
    append-to-body
    width="550px"
    @close="$emit('close')"
  >
    <div style="margin: -20px 0">
      <div class="input">
        <el-input :rows="4" v-model="tex" type="textarea" placeholder="请输入Tex公式" />
      </div>
      <div class="preview">
        <img v-if="src" :src="src" />
        <span v-else>预览</span>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'Wiris',
  data() {
    return {
      dialogVisible: false,
      tex: ''
    }
  },
  computed: {
    src() {
      const value = encodeURIComponent(this.tex)
      return value && '//equation.kaoyanvip.cn/?tex=' + value
    }
  },
  created() {},
  methods: {
    open(alt = '') {
      this.dialogVisible = true
      this.tex = alt
    },
    submit() {
      if (!this.tex) {
        return this.$message.error('请输入Tex公式')
      }
      this.$emit('change', this.tex)
      this.dialogVisible = false
    },
    close() {
      this.$emit('close')
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>
.preview {
  margin-top: 15px;
  border: 2px dashed #eee;
  min-height: 100px;
  text-align: center;
  line-height: 100px;
  color: #666;
}
</style>
